<template>
  <section class='f-agent'>
    <header class="f-header">
      <van-search v-model="searchForm.keyword" show-action shape="round" placeholder="请输入代理商名称或联系人电话" @search="onSearch">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <ul class="f-search">
        <li class="g-flex-ct" @click="openPicker(1)">
          <p class="f-mr-05">{{searchForm.operationalName || '运营状态'}}</p>
          <van-icon style="margin-top:2px" name="arrow-down" />
        </li>
        <li class="g-flex-ct f-ml-20" @click="openPicker(2)">
          <p class="f-mr-05">{{searchForm.certificationName || '实名状态'}}</p>
          <van-icon style="margin-top:2px" name="arrow-down" />
        </li>
      </ul>
    </header>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :style="{ height: currentHeight }" style="overflow-y: auto;">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <section class="f-cell-group" v-for="(item,index) in tableData" :key="index">
          <section class="f-cell">
            <img style="width:70px;height:70px" src="@/assets/icons/icon_shop_head@2x.png" alt="">
            <div class="f-ml-15">
              <p style="font-size: 16px;font-weight: 500;color: #333333;">{{item.shopName}}</p>
              <div class="f-mt-10" style="font-size: 11px;font-weight: 300;color: #666666;">
                <div class="g-flex-ct">
                  <p>运营状态：</p>
                  <p style="color:#000000">{{operationalStatus[item.operationalStatus]}}</p>
                </div>
                <div class="g-flex-ct" style="margin:2px 0">
                  <p>联系方式：</p>
                  <p style="color:#000000">{{item.contactsName}}({{item.contactsPhone}})</p>
                </div>
                <div class="g-flex-ct">
                  <p>代理时间：</p>
                  <p style="color:#000000">{{getDateTime(item.createTime)[6]}}</p>
                </div>
              </div>
            </div>
            <img v-if="item.certificationStatus == 0" class="f-wsm-img" src="@/assets/icons/icon_weishiming@2x.png" alt="">
          </section>
        </section>
      </van-list>
    </van-pull-refresh>

    <van-popup v-model:show="showPicker" closeable position="bottom" close-icon-position="top-left">
      <p class="f-popup-title">选择{{pickerTitle}}</p>
      <van-picker ref="pickerRef" v-model="searchForm.selectId" :columns="columns" :columns-field-names="customFieldName"
        :show-toolbar="false" />

      <div class="f-popup-btn">
        <van-button block type="primary" @click="handlePicker()">确定</van-button>
      </div>
    </van-popup>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { getDateTime, getStore, phoneFormat, successDeal } from '@/utils/utils';
import api from '../api'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const pickerRef = ref()

    const state = reactive({
      userInfo: {},
      searchForm: {
        keyword: "",
        "certificationStatus": "", // 实名认证状态 0：未实名 1：已实名
        "operationalStatus": "", // 企业运营状态 1 - 正常 ， 0 - 拉黑 , 2 - 邀请码冻结
        "orderBy": "desc",
        "page": 1,
        "size": 10
      },

      loading: false,
      finished: false,
      refreshing: false,
      tableData: [],
      total: 0,
      currentHeight: '740px',

      operationalStatus: {
        '0': '拉黑',
        '1': '正常',
        '2': '邀请码冻结',
      },
      certificationStatus: {
        '0': '未实名',
        '1': '已实名',
      },

      pickerTitle: '',
      showPicker: false,
      columns: [],
      customFieldName: {
        text: 'text',
        value: 'value',
        children: 'children'
      },
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '我的代理商',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      state.userInfo = getStore('USER_INFO_MF')

      state.currentHeight = window.innerHeight - 180 + 'px'
    })

    const onLoad = () => {
      let json = JSON.parse(JSON.stringify(state.searchForm))

      if (state.refreshing) {
        state.tableData = [];
        state.refreshing = false;
      }

      api.searchConsumer(json).then(res => {
        state.refreshing = false

        if (res.data.records.length) state.searchForm.page += 1
        state.tableData.push(...res.data.records)

        // 防止触发两次
        if (state.tableData.length >= res.data.total) {
          state.finished = true;
        } else {
          state.finished = false;
        }

        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (state.tableData.length < 10) {
          state.finished = true;
        }
      }).catch(err => {
        state.loading = false;
        state.finished = true;
        state.refreshing = false
      })
    };

    const onRefresh = () => {
      state.searchForm.page = 1

      // 清空列表数据
      state.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true;
      onLoad();
    };

    const onSearch = () => {
      state.searchForm.operationalName = ''
      state.searchForm.operationalStatus = ''
      state.searchForm.certificationName = ''
      state.searchForm.certificationStatus = ''
      state.refreshing = true
      onRefresh()
    }

    const openPicker = (e) => {
      if (e == 1) {
        state.pickerTitle = '运营状态'
        state.columns = [
          { text: '全部', value: '' },
          { text: '拉黑', value: '0' },
          { text: '正常', value: '1' },
          { text: '邀请码冻结', value: '2' },
        ]
      } else if (e == 2) {
        state.pickerTitle = '实名状态'
        state.columns = [
          { text: '全部', value: '' },
          { text: '未实名', value: '0' },
          { text: '已实名', value: '1' },
        ]
      }
      state.showPicker = true
    }

    const handlePicker = (e) => {
      let data = pickerRef.value.confirm().selectedOptions[0]
      state.showPicker = false
      state.refreshing = true
      if (state.pickerTitle == '运营状态') {
        state.searchForm.operationalStatus = data.value
        state.searchForm.operationalName = data.text == '全部' ? '' : data.text
      }
      if (state.pickerTitle == '实名状态') {
        state.searchForm.certificationStatus = data.value
        state.searchForm.certificationName = data.text == '全部' ? '' : data.text
      }

      onRefresh()
    }

    return {
      ...toRefs(state),
      pickerRef,
      getDateTime,
      onSearch,
      onLoad,
      onRefresh,
      handlePicker,
      openPicker
    }
  }
}
</script>
<style lang='scss' scoped>
.f-agent {
  .f-search {
    font-size: 12px;
    font-weight: 300;
    color: #000000;
    padding: 5px 0 10px 21px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
  }
  .f-cell-group {
    margin: 0 14px;
    padding-top: 11px;
    .f-cell {
      width: 347px;
      height: 99px;
      background: #ffffff;
      border-radius: 5px;
      display: flex;
      align-items: center;
      padding-left: 13px;
      position: relative;
      .f-wsm-img {
        position: absolute;
        width: 45px;
        height: 16px;
        right: 11px;
        top: 15px;
      }
    }
  }
}
</style>